<template>
	<div class="tabs-box">
		<div class="tabs-menu">
			<el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
				<el-tab-pane v-for="item in tabsMenuList" :key="item?.path" :label="item?.title" :name="item?.path" :closable="item?.close">
					<template #label>
						<el-icon v-if="item?.icon && tabsIcon" class="tabs-icon">
							<component :is="item.icon"></component>
						</el-icon>
						{{language=='zh'?item?.title:item?.title_ru}}{{item?.subTitle?'（'+item?.subTitle+'）':''}}{{item?.joinName?'『'+item?.joinName+'』':''}}
					</template>
				</el-tab-pane>
			</el-tabs>
			<MoreButton />
		</div>
	</div>
</template>

<script setup lang="ts">
	import Sortable from "sortablejs";
	import { ref, computed, watch, onMounted, toRef } from "vue";
	import { useRoute, useRouter } from "vue-router";
	import { useGlobalStore } from "@/stores/modules/global";
	import { useTabsStore } from "@/stores/modules/tabs";
	import { useAuthStore } from "@/stores/modules/auth";
	import { TabsPaneContext, TabPaneName } from "element-plus";
	import MoreButton from "./components/MoreButton.vue";
	import { getLocationParams } from "@/utils/index";
	
	const route = useRoute();
	const router = useRouter();
	const tabStore = useTabsStore();
	const authStore = useAuthStore();
	const globalStore = useGlobalStore();
	const tabsMenuValue = ref(route.fullPath);
	const tabsMenuList = computed(() => {
		let eIdx = tabStore.tabsMenuList.findIndex(item=>item == null);
		if(eIdx != -1){
			tabStore.tabsMenuList.splice(eIdx,1)
		}
		return tabStore.tabsMenuList
	});
	const tabsIcon = computed(() => globalStore.tabsIcon);
	const language = computed(() => globalStore.language);//页面翻译语种
	onMounted(() => {
		tabsDrop();
		initTabs();
	});

	// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）

	watch(
		() => route.fullPath,
		() => {
			console.log(route)
			if (route.meta.is_full) return;
			tabsMenuValue.value = decodeURIComponent(route.fullPath?.replace(/\+/g, '%20'));
			const tabsParamsName = getLocationParams(route.fullPath, 'name');
			const tabSubTitle = getLocationParams(route.fullPath, 'sub_title');
			const tabsParams = {
				icon: route.meta.icon as string,
				title: route.meta.title as string,
				title_ru:route.meta.title_ru,
				path: decodeURIComponent(route.fullPath?.replace(/\+/g, '%20')),
				name: route.name as string,
				close: !route.meta.is_affix,
				is_keep_alive: route.meta.is_keep_alive as boolean
			};
			console.log(tabsParams)
			if (tabSubTitle !== false) {
				tabsParams.subTitle = tabSubTitle;
			}
			if (tabsParamsName !== false) {
				tabsParams.joinName = tabsParamsName;
			}
			tabStore.addTabs(tabsParams,2);

		},
		{ immediate: true }
	);

	//监听
	watch(
		() => tabsMenuList,
		() => {
			//console.log('监听到了')
			//console.log(tabStore.tabsMenuList)
			//console.log(route.fullPath)
			// const tabIndex = tabStore.tabsMenuList.findIndex(item => route.name == item.name);
			// if (tabIndex != -1) {
			// 	tabsMenuValue.value = decodeURIComponent(tabStore.tabsMenuList[tabIndex].path?.replace(/\+/g, '%20'))
			// }
		},
		{ deep: true, immediate: true }
	);

	watch(tabStore.$state, (newValue, oldValue) => {
		authStore.saveUserPath(newValue)
	})
	// 初始化需要固定的 tabs
	const initTabs = () => {
		authStore.flatMenuListGet.forEach(item => {
			if (item.meta.is_affix && !item.meta.is_hide && !item.meta.is_full) {
				const tabsParamsName = getLocationParams(route.fullPath, 'name');
				const tabSubTitle = getLocationParams(route.fullPath, 'sub_title');
				const tabsParams = {
					icon: item.meta.icon,
					title: item.meta.title,
					title_ru:item.meta.title_ru,
					path: decodeURIComponent(item.path?.replace(/\+/g, '%20')),
					name: item.name,
					close: !item.meta.is_affix,
					is_keep_alive: item.meta.is_keep_alive
				};
				if (tabSubTitle !== false) {
					tabsParams.subTitle = tabSubTitle;
				}
				if (tabsParamsName !== false) {
					tabsParams.joinName = tabsParamsName;
				}
				tabStore.addTabs(tabsParams,1);
			}
		});
	};

	// tabs 拖拽排序
	const tabsDrop = () => {
		Sortable.create(document.querySelector(".el-tabs__nav") as HTMLElement, {
			draggable: ".el-tabs__item",
			animation: 300,
			onEnd({ newIndex, oldIndex }) {
				const tabsList = [...tabStore.tabsMenuList];
				const currRow = tabsList.splice(oldIndex as number, 1)[0];
				tabsList.splice(newIndex as number, 0, currRow);
				tabStore.setTabs(tabsList);
			}
		});
	};

	// Tab Click
	const tabClick = (tabItem : TabsPaneContext) => {
		const url = new URL(location.href);
		const tabIndex = tabStore.tabsMenuList.findIndex(item=>route.name == item.name);
		const fullPath = tabItem.props.name as string;
		if(tabIndex != -1){
			  let listMenu =  tabStore.tabsMenuList
			  listMenu[tabIndex].path = url.pathname + url.search;
			  tabStore.setTabs(listMenu);
			  tabsMenuValue.value = decodeURIComponent(tabStore.tabsMenuList[tabIndex].path?.replace(/\+/g, '%20'))
		}
		setTimeout(()=>{
			router.push(fullPath);
		},0)
	};

	// Remove Tab
	const tabRemove = (fullPath : TabPaneName) => {
		tabStore.removeTabs(fullPath as string, fullPath == decodeURIComponent(route.fullPath?.replace(/\+/g, '%20')));
	};
</script>

<style scoped lang="scss">
	@import "./index.scss";
</style>